<template>
	<div style="width: 100vw;">

		<div style="font-weight: bold;text-align: left;margin-left: 5%;font-size:1.8rem;">新品上市</div>

		<div class="newshop">
			<div style="width: 55vw;" v-for="item in list">

				<div>
					<img v-lazy="url+item.original_img" style="margin-left: 5vw; height: 25vh;width: 45vw;">
				</div>

				<div style="margin-left: 4vw;font-size: 1rem; font-weight: bold;overflow: hidden;text-overflow: ellipsis; white-space: nowrap;width: 45vw;">
					{{item.goods_name}}
				</div>
					<div class="a">
					{{item.goods_name}}
				</div>

		<!-- 		<div class="a">
					{{item.goods_name}}
				</div> -->


				<div style="margin-left: 4vw;width: 45vw;font-size: 1.7rem;text-align: left;color: red;">
					<span style="font-size: 0.1rem;">￥</span> {{item.shop_price}}
				</div>

			</div>



		</div>




		<!-- <div class="skeleton" v-show="list">
		      <van-skeleton :row="3" row-width="160" />
		      <van-skeleton :row="3" row-width="160" />
		      <van-skeleton :row="3" row-width="160" />
		    </div> 
		 -->

	</div>



</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
        props:{
			list:{
				type:Array,
				required:true
			}
		},
		data() {
			return {
			
				url: ''
			}
		},
		computed: {
			...mapGetters([
			 'vuexNewShop',
				'vuexUrl'
			])
		},
		created() {

		
			// console.log(testStr)

			//获取url
			this.$store.dispatch("user/Home_Url").then(e => {
				// console.log(e,111)
				this.url = e
			})
		}


	}
</script>

<style>
	.a {
		font-size: 0.5rem;
		text-align: left;
		display: -webkit-box;
		overflow: hidden;
		white-space: normal !important;
		text-overflow: ellipsis;
		word-wrap: break-word;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-top: 1vh;
		margin-left: 4vw; 
		 width: 45vw;
		 text-align: left;
		 font-size: 0.5rem; 

	}

	.newshop {
		display: flex;
		overflow: hidden;
		overflow-x: scroll;
		margin-top: 2vh;
	}

	/* 隐藏滚动条 */
	::-webkit-scrollbar {
		width: 0 !important;
	}

	::-webkit-scrollbar {
		width: 0 !important;
		height: 0;
	}

	.skeleton {
		.van-skeleton {
			display: inline-block;
			width: 50px;
			margin: 0px 22px;

			.van-skeleton__content {
				width: 50px;
			}

			.van-skeleton__row {
				height: 50px;
				margin: 17px 0px;
			}
		}
	}
</style>
